<template>
	<view>
		<u-navbar :is-back="isback" :title="title" :background="background" :border-bottom="false"
			:back-icon-color='backColor' :title-color='backColor' title-size='32' back-icon-size='38' :titleBold='true'
			:class="yin?'yinclass':''">
			<slot class='navbar-left' name="left">

			</slot>
			<slot class='navbar-right' name="right">

			</slot>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		name: "navbar",
		props: {
			backgroundColor: {
				type: String
			},
			title: {
				type: String,
				default: ''
			},
			isback: {
				type: Boolean,
				default: true
			},
			backColor: {
				type: String,
				default: '#333333'
			},
			yin: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				background: {
					background: this.backgroundColor || '#fff'
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}
			};
		}
	}
</script>

<style lang="scss" scoped>
	.u-border-bottom:after {
		border-bottom-width: 0px;
	}

	.navbar-right {
		position: absolute;
		right: 10px;
	}

	.navbar-left {
		position: absolute;
		left: 10px;
	}

	.yinclass {
		/deep/.u-navbar-inner {
			box-shadow: 0rpx 2rpx 5rpx 0rpx rgba(196, 195, 195, 0.4);
		}
	}
</style>